<template>
  <div class="life-clean">
    <!-- 姓名 -->
    <van-field v-model="text"
               label="称呼"
               clearable
               :required="true"
               style="
              color:red" />
    <!-- 手机 -->
    <van-field v-model="tel"
               type="tel"
               label="联系电话"
               clearable
               :required="true" />
    <van-cell :title="visitPlace"
              is-link
              :required="true"
              @click="showPopup1" />
    <van-popup v-model="show1"
               @close="onClose">
      <van-picker show-toolbar
                  title="选择维修地址"
                  :columns="columns"
                  @cancel="onCancel"
                  @confirm="onConfirm" />
    </van-popup>
    <!-- 来访时间 -->
    <van-cell :title="visitTime"
              is-link
              @click="showPopup"
              :required="true" />
    <van-popup v-model="show"
               @close="onClose">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmDate"
        @cancel="cancel" />
    </van-popup>
    <van-submit-bar
      button-text="提交报修"
      button-color="#72cacd"
      v-b-modal.modal-prevent-closing />
    <!-- 弹框提示 -->
    <div>
      <b-modal id="modal-prevent-closing"
               ref="modal"
               title="提示"
               @ok="handleOk">
        <form ref="form">
          <b-form-group>
            <p v-if="showStatus">提交成功！</p>
            <p v-else>请完成问卷！</p>
          </b-form-group>
        </form>
      </b-modal>
    </div>
  </div>
</template>

<script>
import { msToDate } from '@/IconFont/getTime.js'

export default {
  name: 'LifeClean',
  data () {
    return {
      show: false,
      show1: false,
      show2: false,
      radio: 1,
      text: '',
      tel: '',
      reason: '',
      submitStatus: '请完成问卷！',
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      visitTime: '保洁上门时间',
      visitPlace: '保洁地址',
      messageRequire: false,
      columns: [
        // 第一列
        {
          values: [
            'A', 'B', 'C', 'D', 'E'
          ],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['101', '202', '303', '505', '606'],
          defaultIndex: 1
        }
      ]
    }
  },
  computed: {
    showStatus () {
      if (this.text !== '' && this.tel !== '' && this.visitPlace !== '维修地址' && this.visitTime !== '上门时间') {
        return true
      }
      return false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('Property')
    },
    onClickRight () {
      this.$router.push('/RepairRecord')
    },
    showPopup () {
      this.show = true
    },
    showPopup1 () {
      this.show1 = true
    },
    showPopup2 () {
      this.show2 = true
    },
    onClose () {
      this.show = false
    },
    // 时间
    confirmDate (val) {
      this.show = false
      var result = msToDate(val)
      this.visitTime = `上门时间:${result[1]}`
    },
    cancel () {
      this.show = false
    },
    // 地址
    onCancel () {
      this.show1 = false
    },
    onConfirm (value, index) {
      this.show1 = false
      this.visitPlace = `保洁地址:${value[0]}栋${value[1]}`
    },
    setReason (val) {
      this.reason = val
    },
    handleOk (bvModalEvt) {
      // 判断姓名，手机，性别，地址，来访缘由，来访时间是否都有填写
      if (this.text !== '' && this.tel !== '' && this.visitPlace !== '维修地址' && this.visitTime !== '上门时间') {
        this.messageRequire = true
        this.submitStatus = '提交成功！'
      } else {
        this.messageRequire = false
        this.submitStatus = '请完成问卷！'
      }
      // 写入vuex‘s store
      if (this.messageRequire === true) {
        var vPlace = this.visitPlace.substring(5)
        var vTime = this.visitTime.substring(5)
        var obj = {
          name: this.text,
          telephone: this.tel,
          visitPlace: vPlace,
          reason: this.reason,
          visitTime: vTime
        }
        this.$store.dispatch('_addRepair', obj)
      }
      bvModalEvt.preventDefault()
      this.$nextTick(() => {
        this.$bvModal.hide('modal-prevent-closing')
      })
    }
  }
}
</script>

<style scoped>
  .life-clean {
    width: 100%;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #ffb6c1 !important;
  }
  /* 选中后小圆点的颜色 */
  .el-radio__input.is-checked .el-radio__inner {
    background: #ffb6c1 !important;
    border-color: #ffb6c1 !important;
  }
  .wrap {
    text-align: center;
  }
  .van-popup.van-popup--center {
    width: 70%;
    height: auto;
  }
  .createPermit {
    color: #fff;
    border: none;
    width: 90%;
    margin-top: 4%;
    padding-bottom: 2%;
    padding-top: 2%;
    background-color: rgb(114, 202, 205);
  }
  .van-cell__title {
    text-align: left;
  }
  .qrCode {
    width: 80%;
    height: auto;
  }
  .tip {
    text-align: center;
    width: 90%;
    font-size: 13px;
    color: #778899;
  }
  .van-nav-bar {
    background-color: rgb(114, 202, 205);
  }
  ::v-deep .van-nav-bar .van-icon {
    color: #fff;
  }
  ::v-deep .van-nav-bar__text {
    color: #fff;
    /* color: #07c160; */
  }
  ::v-deep .van-nav-bar .van-ellipsis {
    color: #fff;
  }
  .van-cell {
    color: #323233 !important;
  }
  ::v-deep .van-field__label {
    color: #323233 !important;
  }
  ::v-deep .van-cell__title {
    color: #323233 !important;
  }
  /* 表头样式 */
  ::v-deep thead .cell {
    color: #778899;
  }
  .van-nav-bar {
    background-color: rgb(114, 202, 205);
  }
  ::v-deep .van-nav-bar .van-icon,
  ::v-deep .van-nav-bar__text,
  ::v-deep .van-nav-bar .van-ellipsis {
    color: #fff;
  }
  .life-clean >>> .van-submit-bar {
    position: inherit;
  }
</style>
